﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Draw, Ad hoc drawing, SVG drawing, HTML5 drawing, VML drawing" />
    <meta name="description" content="This page represents the help documentation of the jqxDraw widget." />
    <title>jqxDraw API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
        <div id="Div1">
            <h2>Properties</h2>
            <table class="documentation-table" style="padding-bottom: 20px;">
                <tr>
                    <th>Name
                    </th>
                    <th>Type
                    </th>
                    <th>Default
                    </th>
                </tr>

                <!-- renderEngine -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span>renderEngine</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>''
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'.
                                                                                    When the property is not set jqxDraw will automatically select an optimal rendering engine depending on the browser capabilities.
                            </p>
                            <h4>Code examples</h4>
                                                                                <pre><code>    
    $('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
    $('#jqxDraw').jqxDraw('refresh');
</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/F74Sk/">renderEngine is set to 'HTML5'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- end of renderEngine -->

            </table>
            <br />
        </div>
        <div id="events" style="display: none;">
            <h2>Events</h2>
            <table class="documentation-table">
                <tr>
                    <th>Name
                    </th>
                    <th>Arguments
                    </th>
                    <th></th>
                </tr>
                <!-- mouseover -->
                <!-- mouseout -->
                <!-- click -->
            </table>
        </div>
        <div id="methods">
            <h2 class="documentation-top-header">Methods</h2>
            <table class="documentation-table">
                <tr>
                    <th>Name
                    </th>
                    <th>Arguments
                    </th>
                    <th>Return Value
                    </th>
                </tr>
                <!-- attr -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span26'>attr</span>
                    </td>
                    <td>
                        <span>element, attributes</span>
                    </td>
                    <td>none
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets attributes of an element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>         
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                   
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {});
    // set the fill color and border color of the circle
    // params: element, attributes
    renderer.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m9mzY/">invoke the 'attr' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- circle -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>circle</span>
                    </td>
                    <td>
                        <span>cx, cy, r, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a circle element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>cy</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>         
                                        <tr>
                                            <td><em>r</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>         
                                        <tr>
                                            <td><em>attributes</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                                                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, attributes
    var circleElement = renderer.circle(250, 150, 50, {});
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xv5u8/">invoke the 'circle' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- clear -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span2'>clear</span>
                    </td>
                    <td>
                        <span>None</span>
                    </td>
                    <td>None
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Clears the content of the jqxDraw widget.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw('clear');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/raMw9/">invoke the 'clear' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- getAttr -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span3'>getAttr</span>
                    </td>
                    <td>
                        <span>element, attribute name</span>
                    </td>
                    <td>string
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets element's attribute<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>  
                                       <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                     
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>String</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});
    // get the fill color of the circle
    // params: element, attribute name
    var fillColor = renderer.getAttr(circleElement, 'fill');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bd64X/">invoke the 'getAttr' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- line -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>line</span>
                    </td>
                    <td>
                        <span>x1, y1, x2, y2, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a line element<br />
                                <br />
                               <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>x1</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>y1</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>x2</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>
                                          <tr>
                                            <td><em>y2</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>                                   
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>   
                                    </tbody>

                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // params: x1, y1, x2, y2, attributes
    renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N2PHz/">invoke the 'line' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- measureText -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>measureText</span>
                    </td>
                    <td>
                        <span>text, angle, {optional attributes}</span>
                    </td>
                    <td>{width, height}
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Estimates the size of a text element<br />
                                <br />
                               <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>text</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>angle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em> - object.width and object.height Number properties.
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    // params: text, angle, attributes
    var textSize = renderer.measureText('My text', 45,  { 'class': 'smallText' }); 
    </code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7Vvj8/">invoke the 'measureText' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- on -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>on</span>
                    </td>
                    <td>
                        <span>element, event, function</span>
                    </td>
                    <td>none
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Adds an event handler to an element<br />
                                <br />
                               <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>event</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>function</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
    renderer.on(circleElement, 'click', function () 
        { 
            // get the Y coordinate of the circle's center
            var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
            
            // move the circle 10 pixels down
            renderer.attr(circleElement, { cy: circleY + 10; });
        });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5yRPa/">invoke the 'on' method</a>
                            </div>
                        </div>

                    </td>
                </tr>

                <!-- off -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>off</span>
                    </td>
                    <td>
                        <span>element, event, function</span>
                    </td>
                    <td>none
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Removes an event handler from an element<br />
                                <br />
                                  <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>event</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>function</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
    var moveCircle = function() {
        var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
        renderer.attr(circleElement, { cy: circleY + 10 });
    }
    // add event handler
    renderer.on(circleElement, 'click', moveCircle);
    // remove event handler
    renderer.off(circleElement, 'click', moveCircle);
 
    </code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3LXyU/">invoke the 'off' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- path -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>path</span>
                    </td>
                    <td>
                        <span>line command , {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a path element<br />
                                <br />
                                  <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>path</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // draw a path
    // params: line command ('d'), attributes
    var path = renderer.path("M 100,100 L 150,130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' });
    
    /* Supported line commands:
    MoveTo: M x,y
    LineTo: L x,y
    Cubic curve: C x1,y1,x2,y2,x,y
    Close path: Z
    */
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j4d2Q/">invoke the 'path' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- pieslice -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>pieslice</span>
                    </td>
                    <td>
                        <span>cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a pie slice element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>cx</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>      
                                        <tr>
                                            <td><em>cy</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>innerRadius</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>fromAngle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>endAngle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>centerOffset</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                                                                                              
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a pie slice
    // params: cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}
    var piesliceElement = renderer.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N4fLM/">invoke the 'pieslice' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- refresh -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>refresh</span>
                    </td>
                    <td>
                        <span>None</span>
                    </td>
                    <td>None
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Refreshes / re-draws the content of the jqxDraw widget.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw('refresh');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XN8Xw/">invoke the 'refresh' method</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <!-- rect -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span9'>rect</span>
                    </td>
                    <td>
                        <span>x, y, width, height, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a rectangle element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>x</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>y</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>   
                                        <tr>
                                            <td><em>width</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>            
                                        <tr>
                                            <td><em>height</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                       
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // params: x, y, width, height, attributes
    var rectElement = renderer.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tXQrf/">invoke the 'rect' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- saveAsJPEG -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span30'>saveAsJPEG</span>
                    </td>
                    <td>
                        <span>fileName, exportServer</span>
                    </td>
                    <td>boolean
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Exports the content as JPEG image.<br />
                                The browser must support HTML5 Canvas and the device must be able to connect to the export server.
                                                                                    If you don't setup your own export server the default server is jqwidgets.com.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>image</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>url</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>    
    $('#jqxDraw').jqxDraw('saveAsJPEG', 'myImage.jpeg', 'http://&lt;my domain&gt;/export_server/server.php');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y4DzZ/">invoke the 'saveAsJPEG' method</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <!-- saveAsPNG -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span31'>saveAsPNG</span>
                    </td>
                    <td>
                        <span>fileName, exportServer</span>
                    </td>
                    <td>boolean
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Exports the chart's content as PNG image.<br />
                                The browser must support HTML5 Canvas and the device must be able to connect to the export server.
                                                                                    If you don't setup your own export server the default server is jqwidgets.com.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>image</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>url</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://&lt;my domain&gt;/export_server/server.php');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mx2s7/">invoke the 'saveAsPNG' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- text -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>text</span>
                    </td>
                    <td>
                        <span>text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a text element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>x</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>y</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>width</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>height</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>angle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>attributes</em></td>
                                            <td>Array</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>clip</em></td>
                                            <td>Boolean</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>halign</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>valign</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>rotateAround</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                                                          
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    // params: text, x, y, width, height, angle, attributes, clip, horizontal alignment('center', 'left', 'right'), vertical alignment('middle', 'top', 'bottom'), rotate around point
    renderer.text(
        "Drawing shapes", // text
        50, // x
        20, // y 
        undefined, // width
        undefined, // height
        0, // angle
        { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, // attributes
        false, // clip
        'center', // horizontal alignment
        'center', // vertical alignment
        'centermiddle'); // rotate around point
    </code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KGbwb/">invoke the 'text' method</a>
                            </div>
                        </div>
                    </td>
                </tr>


            </table>
            <br />
        </div>
</body>
</html>
